<template>
  <a-modal
    :title="title"
    :width="450"
    :visible="visible"
    :closable="false"
    :maskClosable="false">

    <template slot="footer">
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" @click="selectOk">确认</a-button>
    </template>

    <a-form>
      <a-form-item v-if="isMultiTenant" :labelCol="{span:4}" :wrapperCol="{span:20}" style="margin-bottom:10px" :validate-status="validate_status1">
        <a-tooltip placement="topLeft" >
          <template slot="title">
            <span>您有多个租户，请选择切换租户</span>
          </template>
          <a-avatar style="backgroundColor:#87d068" icon="gold" />
        </a-tooltip>

        <a-select :value="tenant_id" @select="selectedTenant" @change="handleTenantChange" :class="{'valid-error':validate_status1=='error'}" placeholder="请选择租户" style="margin-left:10px; width: 80%">
          <a-icon slot="suffixIcon" type="gold" />
          <a-select-option v-for="d in tenantList" :key="d.id" :value="d.id">
            {{ d.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>

  import Vue from 'vue'
  import { USER_INFO, TENANT_ID } from '@/store/mutation-types'
  import { listTenantsByUserId } from '@/views/system/user/service.js'

  export default {
    name: 'TenantSelect',
    data() {
      return {
        visible: false,
        isMultiTenant: false,
        tenantList: [],
        title: '',
        username: '',
        tenant_id: '',
        validate_status1: undefined
      }
    },
    methods: {
      clear() {
        this.tenantList = []
        this.tenant_id = ''
        this.visible = false
        this.validate_status1 = ''
      },
      bizTenant(userId, calback) {
        let that = this
        this.tenant_id = Vue.ls.get(TENANT_ID)
        listTenantsByUserId(userId).then(res => {
          that.tenantList = res.result
          let length = that.tenantList.length
          if (length === 0) {
            that.isMultiTenant = false
            that.tenant_id = 0
          } else if (length === 1) {
            that.isMultiTenant = false
            that.tenant_id = this.tenantList[0].id;
          } else {
            that.visible = true
            that.isMultiTenant = true
            that.tenantList = res.result
          }
          that.tenantList.forEach(function (item) {
            if (item.id === Vue.ls.get(TENANT_ID)) {
              that.title = '租户切换（当前租户 : ' + item.name + '）'
            }
          })
          calback()
        })
      },
      show() {
        let that = this
        that.clear();
        let user = Vue.ls.get(USER_INFO)
        that.username = user.username
        that.bizTenant(user.id, function () {
          if (that.visible === false) {
            that.$store.dispatch('saveTenant', that.tenant_id);
          }
        });
      },

      selectOk() {
        if (this.isMultiTenant && !this.tenant_id) {
          this.validate_status1 = 'error'
          return false
        }
        if (Vue.ls.get(TENANT_ID) !== this.tenant_id) {
          this.$store.dispatch('saveTenant', this.tenant_id).then(response => {
            window.location.reload();
          });
        } else {
          this.visible = false;
        }
      },
      handleTenantChange(e) {
        this.validate_status1 = ''
        this.tenant_id = e
      },
      selectedTenant(e) {
        this.tenant_id = e
        this.validate_status1 = ''
      },
      close () {
        this.visible = false;
      }
    }
  }
</script>

<style scoped>

</style>
